<script setup>
import { ref } from "vue"

const tabArr = ref(["tab1", "tab2", "tab3"])
const tabIndex = ref(0)

const changeTab = (index) => {
  tabIndex.value = index
}
</script>

<template>
  <div class="tab-container flex">
    <div
      class="tab flex"
      :class="{ 'tab-active': tabIndex === index }"
      v-for="(item, index) in tabArr"
      :key="index"
      @click="changeTab(index)"
    >
      {{ item }}
    </div>
  </div>
</template>

<style scoped lang="scss">
.tab-container {
  height: 100%;
  justify-content: start;
  .tab {
    height: 30px;
    padding: 0 30px;
    margin-right: 10px;
    border: 1px solid #ccc;
    color: #fff;
    cursor: pointer;
  }
  .tab-active {
    color: var(--main-color);
    font-weight: 600;
    border: 1px solid var(--main-color);
  }
}
</style>
